<template>
  <nav
    ref="navEl"
    class="shadow-md fixed top-0 w-full z-50"
    :class="{ 'glass-15': isGlass }"
  >
    <div
      class="container mx-auto relative flex justify-between items-center px-8 py-4"
    >
      <h1
        class="font-semibold sm:text-3xl text-emerald-500 text-xl border-1 border-transparent"
      >
        <svg-icon class="w-8 h-8" name="cube-transparent" />
        <span class="ml-2">Learning Todos</span>
      </h1>

      <div ref="menuEl" v-show="showMenu" class="navbar-menu shadow-xl">
        <router-link class="px-2 hover:text-emerald-500" to="/">
          首页
        </router-link>
        <router-link class="px-2 hover:text-emerald-500" to="/todos">
          待办
        </router-link>
        <router-link class="px-2 hover:text-emerald-500" to="">
          面试集锦
        </router-link>
        <router-link class="px-2 hover:text-emerald-500" to="">
          分享
        </router-link>
        <router-link class="px-2 hover:text-emerald-500" to="/about">
          关于
        </router-link>
      </div>
      <ZToggle />
      <div class="flex items-center space-x-2">
        <div
          ref="menuBtnEl"
          class="p-1 z-20 md:hidden"
          :class="menuBtnClass"
          @click="showMenu = !showMenu"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </div>

        <a
          class="w-8 h-8 overflow-hidden rounded-full bg-gray-200 cursor-pointer"
          @click="logout"
        >
          <img
            v-if="userStore.avatar"
            class="w-full h-full object-cover object-center"
            :src="userStore.avatar"
            alt="avatar"
          />
          <svg
            v-else
            xmlns="http://www.w3.org/2000/svg"
            class="p-2 text-gray-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>
        </a>
      </div>
    </div>
  </nav>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import { request } from "./apis";
import { breakpoints } from "./config";
import { useNotification } from "@/pkg/ZNotification.vue";
import SvgIcon from "./SvgIcon.vue";
import { onClickOutside, useElementSize, useWindowScroll } from "@vueuse/core";

const userStore = useUserStore(),
  router = useRouter(),
  notification = useNotification(),
  showMenu = ref(false),
  menuEl = ref(),
  menuBtnEl = ref<HTMLElement>(),
  navEl = ref(),
  greaterMd = breakpoints.greater("md");
onClickOutside(menuEl, (e) => {
  if (menuBtnEl.value?.contains(e.target as Node)) return;
  if (!greaterMd.value) showMenu.value = false;
});
const { height } = useElementSize(navEl),
  { y } = useWindowScroll(),
  // fontSize = () => parseInt(getComputedStyle(document.documentElement)["fontSize"]),
  isGlass = computed(() => y.value >= height.value);
//
userStore.getUserInfo();
const logout = async () => {
  const { data } = await request("/logout");
  if (data?.success) {
    userStore.logout();
    router.push({ name: "home" });
  } else if (data.message) notification?.warning(data.message);
};
watch(greaterMd, (val) => (showMenu.value = val), {
  immediate: true,
});
//
const menuBtnClass = computed(() =>
  showMenu.value
    ? "border-gray-100 border-1 border-b-0 bg-white"
    : "bg-transparent"
);
</script>
<style>
.navbar-menu {
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border: 1px solid #eee;
  margin: 0 0.25rem;
  padding: 0.5rem 1.5rem;
}
.glass-15 {
  backdrop-filter: blur(15px);
}
@media (min-width: 768px) {
  .navbar-menu {
    position: static;
    flex-direction: row;
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
}
</style>
